<template>
    <div>
        <el-row>
        <el-col :span="24">
        <div class="grid-content bg-purple-dark" >
        <el-breadcrumb separator-class="el-icon-arrow-right" class='p_title'>
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        </div>
        </el-col>
        </el-row>

            <el-row>
        <el-col :span="8"><div class="grid-content bg-purple">
            <el-input v-model="input" placeholder="请输入内容" @keydown.native.enter='initlist'></el-input>
            </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light">
            <el-button icon="el-icon-search" @click='initlist'></el-button>
            <el-button plain type="primary text" @click="add">添加用户</el-button>
            </div></el-col>

        </el-row>

        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            type='index'
            label="#"
            width="100">
            </el-table-column>
            <el-table-column
            prop="username"
            label="姓名"
            width="100">
            </el-table-column>
            <el-table-column
            prop="email"
            label="邮箱">
            </el-table-column>
                <el-table-column
            prop="mobile"
            label="电话"
            width="180">
            </el-table-column>
            <el-table-column
            label="用户状态"
            width="180">
             <template slot-scope="scope">
            <el-switch
            v-model="value2"
            active-color="#13ce66"
            inactive-color="#ff4949">
            </el-switch>
             </template>
            </el-table-column>
            <el-table-column  label="操作">
                 <template slot-scope="scope">
            <el-button size='mini'  plain type="primary" icon="el-icon-edit"  @click='edit'></el-button>
            <el-button size='mini'  plain type="success" icon="el-icon-check" @click='check'></el-button>
            <el-button size='mini'  plain type="danger" icon="el-icon-delete" @click='del'></el-button>
                 </template>
            </el-table-column>
            </el-table>


        <el-pagination
        class="bg-purple-dark p_page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=1
        :page-sizes="[1, 2, 3, 4]"
        :page-size="1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
</template>
<script>
import { getuser } from "@/api";
// console.log(getuser())
export default {
  data() {
    return {
      value2: '',
      input: "",
      tableData: [],
      total:0,
      pagenum:1,
      pagesize:3
    };
  },
  created() {
    this.initlist();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize=val
      this.initlist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum=val
      this.initlist();
    },
    //初始化列表
    initlist() {
      getuser({ params: { query:this.input, pagenum: this.pagenum, pagesize: this.pagesize } }).then(res => {
        console.log(res.data);
        this.tableData=res.data.users
        this.total=res.data.total 
      });
    },
    // search(){
    //   this.initlist();
    // },
    add() {
        this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
          dangerouslyUseHTMLString: true
        });
      },
    edit(){
      //触发编辑按钮
    },
    del(){
      //触发删除按钮
    },
    check(){
      //保存按钮
    }
  }
};
</script>
<style lang='scss' scoped>
.p_title {
  line-height: 40px;
  padding-left: 10px;
}
.p_page {
  padding: 10px;
}
.el-row {
  //   margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
